<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染练习</title>
</head>
<body>
    <div id="login">
        <h1 v-show="ok">Welcome to learn VUE!</h1>
        <template v-if="loginType === 'userName'">
            <label>Username</label>
            <input placeholder="Eneter your username" key="username-input">
        </template>
        <template v-else>
            <label>E-mail</label>
            <input type="email" placeholder="Enter your E-mail" key="email-input">
        </template>
        <button v-on:click="changeType">Toggle login type</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        var vm = new Vue({
            el: "#login",
            data: {
                ok: true,
                loginType: 'userName'
            },
            methods: {
                changeType: function() {
                    this.ok = (this.ok == true)? false : true
                    this.loginType = (this.loginType === "userName")? 'email' : 'userName'
                }
            }
        })
    </script>
</body>
</html>